@extends('layouts.mobile_main')

@section('title', $title)

@section('resources')
    @parent
    <link rel="stylesheet" href="{{env('CSS_DOMAIN')}}css/swiper.min.css?v={{env('CSS_VERSION')}}" type="text/css">
    <script src="{{ env('JS_DOMAIN') }}js/adaptation.js?v={{env('JS_VERSION')}}" type="text/javascript"></script>
    <style>
        /*=========================重置样式==========================*/
        body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option{margin: 0; padding: 0;}
        ul,ol{list-style: none;}
        img{border: 0;}
        input,select,textarea{outline:0;border:none;}
        html,body{font-family: "微软雅黑"}
        textarea{resize:none;}
        table{border-collapse: collapse; border-spacing: 0;}
        a{text-decoration: none;color: #000;}
        h2{font-weight: normal;}
        header a{
            width: 0.48rem;
            position: absolute;top: 0.3rem;left: 0.6rem;
            z-index: 10;
        }
        header a img{
            width: 0.48rem;
            float: left;
        }
        header .images{
            font-size: 0.4rem;
            color: #fff;
            position: absolute;top: 0.3rem;right: 0.6rem;
            z-index: 10;
        }
        .swiper-container{
            width: 100%;
            background-color: #000;
            position: relative;
        }
        .swiper-slide img{
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
        }
        .picture_text{
            /*height: 200px;*/
            padding-bottom: 30px;
            width: 100%;
            z-index: 50;
            position: absolute;
            bottom: 0px;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            /*display: none;*/
        }
        .picture_text h1:nth-child(1){
            font-size: 0.48rem;
            text-align: center;
            font-weight: normal;
        }
        .picture_text p:nth-child(2){
            font-size: 0.4rem;
            margin: 0 0.6rem;
        }
        .swiper-pagination{
            font-size: 0.4rem;
            position: absolute;
            top: 0.3rem;right: 0.6rem;
            color: #fff;
            text-align: right;
        }
    </style>
@endsection

@section('content')
<header>
    <a href="javascript:history.go(-1);"><img src="{{env('IMAGE_DOMAIN')}}images/shop_back.png?v={{env('IMGAE_VERSION')}}" alt=""></a>
</header>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
        <img src="{{env('IMAGE_DOMAIN')}}{{$logo}}" alt="">
    </div>
    @foreach($photos as $photo)
        <div class="swiper-slide">
            <img src="{{env('IMAGE_DOMAIN')}}{{$photo}}" alt="">
        </div>
    @endforeach
    @foreach($goodsphotos as $list)
        <div class="swiper-slide">
            <img src="{{env('IMAGE_DOMAIN')}}{{$list['url']}}" alt="">
            <div class="picture_text">
                <h1>{{$list['name']}}</h1>
                <p>{{$list['description']}}</p>
            </div>
        </div>
    @endforeach
  </div>
  <div class="swiper-pagination"></div>
</div>
@endsection

@section("scriptResources")
@parent
<script src="{{ env('JS_DOMAIN') }}js/swiper.min.js?v={{env('JS_VERSION')}}" type="text/javascript"></script>
<script>
	window.onload=function(){
        $(".swiper-container").height($(window).height());
        for (var i = 0; i < $(".swiper-slide img").length; i++) {
            $(".swiper-slide img").eq(i).css("margin-top",-$(".swiper-slide img").eq(i).height()/2);
        };
        var on_off=false;
        $(window).click(function(){
            if(on_off){
                $(".picture_text").slideDown(400);
                on_off=false;
            }else{
                $(".picture_text").slideUp(200);
                on_off=true;
            }

        })
        var all_images=$(".swiper-slide").length;
        $(".all_images").html(all_images);
    }
	var mypage = '{{$page}}';
	var for_image=0
	var mySwiper = new Swiper('.swiper-container',{
	pagination : '.swiper-pagination',
	uniqueNavElements :false,
	watchSlidesProgress : true,
	initialSlide : mypage,//第几张图进
	paginationType : 'fraction',
	})
</script>

@endsection